<template>
	<view>
		<!--   		<a
			href="androidamap://navi?sourceApplication=appname&amp;poiname=fangheng&amp;lat=31.230416&amp;lon=121.473701&amp;dev=1&amp;style=2">打开高德</a> -->

		<uni-section title="选择图片" type="line" class="col">
			<view class="example-body">
				<uni-file-picker file-mediatype="image" limit="9" @select="select()"></uni-file-picker>
			</view>
		</uni-section>

		<view class="level">
			<input style="height: 60px;" class="col" @blur="setTitle" placeholder="填写标题会有更多赞哦~" />
		</view>

		<view class="level">
			<textarea class="col" @blur="setTextArea" placeholder="添加正文" />
		</view>

		<!-- 定位图标 -->
		<view style="display: flex; margin-left: 20px;">
			<!-- 定位 -->
			<view @click="curLocation()">
				<uni-icons custom-prefix="custom-icon" type="location-filled" size="20">
				</uni-icons>添加地点
			</view>
			<view @click="curLocation()">
				<uni-tag :inverted="true" text="标记位置" type="success" />
			</view>
			<!-- 日期选择 -->
			<view @click="open">
				<uni-icons custom-prefix="custom-icon" type="arrow-right" size="20"></uni-icons>添加日期
			</view>
			<view @click="open">
				<uni-tag :inverted="true" text="选择日期" type="success"></uni-tag>
			</view>

			<uni-calendar ref="calendar" class="uni-calendar--hook" :clear-date="true" :insert="info.insert"
				:range="info.range" @confirm="confirm" />

		</view>

		<!-- 热门搜索标签 -->
		<uni-section title="热门标签" style="height: 130px;" class="col">
			<view class="top">
				<view>
					<uni-tag :inverted="true" text="昆明" type="primary" @click="setSearchInput('昆明')" />
				</view>
				<view>
					<uni-tag :inverted="true" text="曲靖" type="success" @click="setSearchInput('曲靖')" />
				</view>
				<view>
					<uni-tag :inverted="true" text="大理" type="warning" @click="setSearchInput('大理')" />
				</view>
				<view>
					<uni-tag :inverted="true" text="呈贡" type="error" @click="setSearchInput('呈贡')" />
				</view>
				<view>
					<uni-tag :inverted="true" text="香格里拉" @click="setSearchInput('香格里拉')" />
				</view>
			</view>
		</uni-section>

		<button type="primary" @click="sub">提交打卡</button>

	</view>
</template>

<script>
	function getDate(date, AddDayCount = 0) {
		if (!date) {
			date = new Date()
		}
		if (typeof date !== 'object') {
			date = date.replace(/-/g, '/')
		}
		const dd = new Date(date)

		dd.setDate(dd.getDate() + AddDayCount) // 获取AddDayCount天后的日期

		const y = dd.getFullYear()
		const m = dd.getMonth() + 1 < 10 ? '0' + (dd.getMonth() + 1) : dd.getMonth() + 1 // 获取当前月份的日期，不足10补0
		const d = dd.getDate() < 10 ? '0' + dd.getDate() : dd.getDate() // 获取当前几号，不足10补0
		return {
			fullDate: y + '-' + m + '-' + d,
			year: y,
			month: m,
			date: d,
			day: dd.getDay()
		}
	}
	export default {
		data() {
			return {
				title: '',
				textArea: '',
				curLongitude: '',
				curLatitude: '',
				curAddress: '',
				curDate: {},

				showCalendar: false,
				info: {
					// lunar: true,
					range: true,
					insert: false,
				},

				cur: {},
				
				imageList:[]

			}
		},
		onReady() {
			this.$nextTick(() => {
				this.showCalendar = true
			})
			// TODO 模拟请求异步同步数据
			setTimeout(() => {
				this.info.date = getDate(new Date(), -30).fullDate
				this.info.startDate = getDate(new Date(), -60).fullDate
				this.info.endDate = getDate(new Date(), 30).fullDate
			}, 2000)
		},
		methods: {
			// 获取图片上传状态
			select(e){
				console.log(e)
				uni.chooseImage({
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.uploadFile({
							url: 'http://microtourism.natapp1.cc/Oss/fileOss/one', //仅为示例，非真实的接口地址
							filePath: tempFilePaths[0],
							name: 'file',
					
							success: (uploadFileRes) => {
								this.imageList.push(uploadFileRes.data)
								console.log('uploadFileRes.data',uploadFileRes.data);
							}
						});
					}
				});
				
				 console.log('选择文件：',e)
				// this.imageList.push(e.tempFilePaths)
				// uni.request({
				// 	url:'http://microtourism.natapp1.cc/Oss/fileOss/one',
				// 	method:"POST",
				// 	data:{
				// 		file:e.tempFiles[0].name
				// 	},
				// 	success: (res) => {
				// 		console.log('adf',e.tempFiles,'adfadfsa',e.tempFiles[0].name)
				// 		console.log(res)
				// 	},
				// 	fail: (err) => {
				// 		console.log(err)
				// 	}
				// })
			},
			// 热门搜索标签
			setSearchInput(text) {
				this.title=text
				console.log(text)
			},
			onClick() {
				console.log('啊手动阀')
			},
			setTitle(e) {
				this.title = e.detail.value
				console.log(this.title)
			},
			setTextArea(e) {
				this.textArea = e.detail.value
				console.log(this.textArea)
			},
			curLocation() {
				uni.getLocation({
					type: 'wgs84',
					geocode: true,
					success: (res) => {
						this.curLongitude = res.longitude;
						this.curLatitude = res.latitude;
						console.log('当前位置的经度：' + res.longitude);
						console.log('当前位置的纬度：' + res.latitude);
					},
					fail: (err) => {
						console.log(err)
					},
					complete: () => {
						uni.chooseLocation({
							success: function(res) {
								this.curLongitude = res.longitude;
								this.curLatitude = res.latitude;
								this.curAddress = res.address;
								console.log('位置名称：' + res.name);
								console.log('详细地址：' + res.address);
							}
						});
					}
				});
			},
			// 日历点击打开和点击确认关闭
			open() {
				console.log(this.info)
				this.$refs.calendar.open()

			},
			confirm(e) {
				this.curDate.dateBefore = e.range.before,
					this.curDate.dateAfter = e.range.after,
					console.log('confirm :', this.curDate)
			},

			// 提交打卡
			sub() {
				uni.request({
					url: 'http://microtourism.natapp1.cc/api-clock/clock/add',
					method: 'POST',
					header: {
						'Content-Type': 'multipart/form-data'
					},
					data: {
						userId:1,
						title: this.title,
						content: this.textArea,
						position: this.curAddress,
						// date: this.curDate,
						imageUrl:this.imageList
					},
					success: (res) => {
						console.log(res)
					},
					fail: (err) => {
						console.log(err)
					}
				})

				console.log('sub ',this.imageList, this.title, this.textArea, this.curLongitude, this.curLatitude, this.curAddress, this
					.curDate)
					
					// uni.request({
					// 	url:'http://175.24.175.35:10200/api/v1/account/login/password',
					// 	method:"POST",
					// 	data:{
					// 		 "phone":"15911245016",
					// 		            "password":"123456789"
					// 	},
					// 	success: (res) => {
					// 		console.log(res)
					// 	},
					// 	fail: (err) => {
					// 		console.log(err)
					// 	}
					// })
					
			}
		}
	}
</script>

<style>
	.col {
		background-color: #FFFFFF;
		margin: 10px;
		padding: 10px;
		width: 90%;
		border-bottom: 2px solid #C8C7CC;
		/* border: 1px solid gray; */
		/* border-radius: 10px; */
	}

	.top {
		display: flex;
		margin: 20px;
	}

	.uni-tag {
		margin-left: 10px;
		border-radius: 15px;
	}
</style>
